<script lang="js" setup name="StudyBar">
import { computed, onMounted, reactive, ref, watch } from "vue";
import StudyItem from "./StudyItem.vue";
import { useArchiveStore } from "@/stores/archive";

const archiveStore = useArchiveStore();
const studyItemRefs = reactive([]);

const getItemRef = (el, idx) => {
	if (el) {
		studyItemRefs[idx] = el;
	}
};

const onSelected = ({ pos }) => {
    for (let i = 0; i < studyItemRefs.length; i++) {
        if (i == pos) {
            studyItemRefs[i].setSelected(true);
            // archiveStore.setSeriesList(studyItemRefs[i].getSeriesList());
            archiveStore.setCurrentStudy(studyItemRefs[i].getStudy());
        } else {
            studyItemRefs[i].setSelected(false);
        }
    }
};

watch(() => archiveStore.archiveData.studyList, () => {
    setTimeout(() => {
		if (archiveStore.getCount() > 0 && archiveStore.currentStudy == null) {
			archiveStore.setCurrentStudy(archiveStore.archiveData.studyList[0]);
			onSelected({ pos: 0 });
    	}
	}, 0);
});

onMounted(() => {
	// console.log("StudyBar mounted, studyList: ", archiveStore.archiveData.studyList);
});
</script>

<template>
	<div class="studybar">
		<StudyItem
			v-for="(study, idx) in archiveStore.archiveData.studyList"
			:key="study.studyInsUid"
			:ref="el => getItemRef(el, idx)"
			:study="study"
			:pos="idx"
			@selected="onSelected"
		/>
	</div>
</template>

<style lang="scss" scoped>
.studybar {
	display: flex;
	flex-direction: row;
	height: 100%;
	// background-color: rgb(214,219,223);
	border-bottom: 1px solid gray;
	overflow-x: auto;
	overflow-y: hidden;

	/* 移动端滚动优化 */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* 隐藏滚动条 */
.studybar::-webkit-scrollbar {
	display: none;
}

/* 移动端自适应样式 */
@media (max-width: 768px) {
	.studybar {
		height: 80px; /* 移动端固定高度 */
		min-height: 80px;
	}
}

/* 超小屏幕手机 (320px - 480px) */
@media (max-width: 480px) {
	.studybar {
		height: 70px; /* 超小屏幕更小高度 */
		min-height: 70px;
	}
}

/* 平板设备适配 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.studybar {
		height: 90px; /* 平板适中高度 */
		min-height: 90px;
	}
}
</style>
